<!-- 审核管理 -->
<template>
  <el-form ref="ruleFormRef" :model="ruleForm" inline class="ruleForm">
    <el-form-item label="申请人：" prop="name">
      <el-input v-model="ruleForm.name" style="width: 136px" clearable />
    </el-form-item>

    <el-form-item>
      <el-radio-group v-model="ruleForm.status" @change="radioChange">
        <el-radio-button label="">全部</el-radio-button>
        <el-radio-button label="0">待审核</el-radio-button>
        <el-radio-button label="1">已通过</el-radio-button>
        <el-radio-button label="2">已驳回</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">查询</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="tableList" style="width: 100%" v-loading="loading">
    <el-table-column prop="name" label="申请人" align="center" />
    <el-table-column prop="type" label="申请类别" align="center" >
      <template #default="scope">
        {{scope.row.type||'自有车申请'}}
      </template>
    </el-table-column>

    <el-table-column prop="sex" label="性别" align="center" >
      <template #default="scope">
        {{scope.row.sex==1?'男':"女"}}
      </template>
    </el-table-column>
    <el-table-column prop="registerTime" label="申请时间" align="center" />
    <el-table-column prop="auditTime" label="审核时间" align="center" />
    <el-table-column prop="mobileNo" label="联系方式" align="center" />
    <el-table-column prop="status" label="审核状态" align="center" >
      <template #default="scope">
        {{statusCn(scope.row.status) }}
      </template>
    </el-table-column>
    <el-table-column prop="auditUser" label="审核人" align="center" />

    <el-table-column label="操作" align="center">
      <template #default="scope">

        <el-button link type="success" @click="openDialogApproved(scope.row.id)">通过</el-button>
        <el-button link type="danger" @click="reject(scope.row.id)">驳回</el-button>
        <el-button link type="primary" @click="openDialog(scope.row.id)">查看详情</el-button>
        <!-- <el-button link type="primary">历史记录</el-button> -->
      </template>
    </el-table-column>


  </el-table>

  <footer class="pagination">
    <el-pagination
        v-model:currentPage="ruleForm.page"
        v-model:page-size="ruleForm.limit"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        small
    />
  </footer>

  <ExamineDetailDialog
      v-model:show="showDialog"
      v-if="showDialog"
      :detailId="detailId"
      @approved="approved"
      @reject="reject"
  >
  </ExamineDetailDialog>
  <ExaminePasslDialog
      v-model:show="showPass"
      v-if="showPass"
      :detailId="detailId"
      @approved="approved"
      @reject="reject"
  >
  </ExaminePasslDialog>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, reactive, onMounted } from 'vue'
import ExamineDetailDialog from './components/ExamineDetailDialog.vue'
import ExaminePasslDialog from './components/ExaminePasslDialog.vue'
import api from '@/api/apis/driverExamine'

const ruleForm = reactive({
  name: '',
  status: "",
  page: 1,
  limit: 20,

})
//总数
const total = ref(0)
//搜索
const search = () => {
  ruleForm.page = 1
  getTableList()
}

//表格数据
const tableList = ref([])
//加载
const loading = ref(false)

onMounted(()=>{
  getTableList()
})
//获取表格数据
const getTableList =async () => {
  loading.value = true
  let { data } = await api.getDriverPage({
    current: ruleForm.page,
    pageSize: ruleForm.limit,
    searchCount: true,
    queryRo: {
      name: ruleForm.name,
      status: ruleForm.status,
    },
  })
  tableList.value = data.data.rows
  total.value = Number(data.data.total)
  loading.value = false


}

const statusCn = (value: number) => {
  let obj: any = {
    0: '待审核',
    1: '已通过',
    2: '已驳回',
  }
  return obj[value]
}

//改变筛选状态
const radioChange=()=>{
  ruleForm.page = 1
  getTableList()
}
//改变每页条数
const handleSizeChange = (val: number) => {
  ruleForm.page = 1
  ruleForm.limit = val
  getTableList()
}
//改变当前页数
const handleCurrentChange = (val: number) => {
  ruleForm.page = val
  getTableList()
}

//弹框开关
const showDialog = ref(false)
//详情id
const detailId = ref()
//打开详情弹框
const openDialog = (id: string) => {
  detailId.value = id
  showDialog.value = true
}
const showPass = ref(false)
const openDialogApproved = (id: string) => {
  detailId.value = id
  showPass.value = true
}
//审核
const approved = async(sendData:object) => {

  let { data } = await api.driverAudit({ id:detailId.value, status:1, carNo:sendData.carNo, driverType:sendData.driverType})
  if (data.code == 200) {
    getTableList()
    ElMessage.success("审核通过")
    showDialog.value = false
  }
  if (data.code == 1111) {
    ElMessage.warning({
      message: '请为司机选择车辆!',
      type: 'warning',
    })
    getTableList()
    showDialog.value = false
  }
  if (data.code ==1071) {
    ElMessage.error({
      message: '请勿重复审核!',
      type: 'error',
    })
    getTableList()
    showDialog.value = false
  }

  if (data.code == 1061) {
    ElMessage.warning({
      message: '手机号已被使用!',
      type: 'warning',
    })
    getTableList()
    showDialog.value = false
  }
  if (data.code == 1091) {
    ElMessage.error({
      message: '需要为司机指定车辆!',
      type: 'error',
    })
    getTableList()
    showDialog.value = false
  }
}
//驳回审核
const reject = (id:string) => {
  ElMessageBox.confirm('是否驳回该用户?', '驳回操作确认', {
    type: 'warning',
  })
      .then(async() => {
        let { data } = await api.driverAudit({ id, status:2 })
        if (data.code == 200) {
          getTableList()
          ElMessage.success("已驳回审核")
          showDialog.value = false
        }
        if (data.code ==1071) {
          ElMessage.error({
            message: '请勿重复审核!',
            type: 'error',
          })
          getTableList()
          showDialog.value = false
        }
        if (data.code == 1091) {
          ElMessage.warning({
            message: '已驳回!',
            type: 'danger',
          })
          getTableList()
          showDialog.value = false
        }
      })
      .catch(() => {})
}
</script>

<style scoped lang="scss">
footer {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}
</style>
